<template>
  <div class="box">
    <div class="login-form">
      <!-- <form class="login-form"> -->
      <!-- <h2>欢 迎 登 录</h2> -->
      <img
        src="../assets/register/logo-white-8962708214629a3e8f9fbf5b87b70c3ace41c4175cbcc267f7fbb8449ac45bdd.svg"
        alt=""
      />
      <input
        type="text"
        name="username"
        placeholder="用户名"
        :state="usernameState"
        v-model="username"
        @blur="regName"
      />
      <div v-show="err" class="err">用户名或密码错误</div>
      <input
        type="password"
        name="password"
        placeholder="密码 "
        :state="passwordState"
        v-model="userpwd"
        @blur="regPwd"
      />
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <button type="submit" @click="handle()">登 录</button>
      <div>
        <router-link to="/reg">注册/</router-link>
        <router-link to="/forgetpassword">忘记密码</router-link>
      </div>
      <!-- </form> -->
    </div>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
.box {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: url(../assets/forgetpassword/bj4.jpg) no-repeat fixed;
  background-size: cover;
}

.login-form img {
  width: 369px;
  height: 60px;
  margin-bottom: 15px;
}

.login-form {
  display: flex;
  position: relative;
  width: 482px;
  height: 450px;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  z-index: 1;
  background: inherit;
  border-radius: 18px;
  overflow: hidden;
}

.login-form::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  /* + 两边各有一个空格  否则 无效*/
  height: calc(100% + 20px);
  background: inherit;
  box-shadow: 0 0 0 200px rgba(30, 30, 30, 0.4) inset;
  z-index: -1;
  filter: blur(8px);
  overflow: hidden;
}

.login-form h2 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 25px;
  color: #fff;
}

.login-form a {
  color: #8c8c8c;
}

.login-form a:hover {
  color: #fff;
  text-decoration: none;
}

.login-form input,
.login-form button {
  margin: 16px 0;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 4px;
  padding: 0 14px;
  color: #e7eaed;
}

.login-form input::placeholder {
  color: #dee1e6;
}

.login-form .el-checkbox {
  color: #8c8c8c;
  text-align: right;
  font-size: 10px;
}

.login-form .el-checkbox__inner {
  background-color: #8c8c8c;
}

.login-form button {
  width: 400px;
  position: relative;
  margin-top: 15px;
  background-color: rgba(137, 157, 237, 0.4);
  color: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s;
}

.login-form button:hover {
  background-color: rgba(41, 118, 229, 0.67);
}

.login-form button::before,
.login-form button::after {
  content: "";
  display: block;
  width: 80px;
  height: 100%;
  background-color: rgba(137, 157, 237, 0.3);
  opacity: 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  transform: skewX(-15deg);
  filter: blur(30px);
  overflow: hidden;
  transform: translateX(-100px);
}

.login-form button::after {
  width: 40px;
  background-color: #496CC0(179, 255, 210, 0.3);
  left: 60px;
  filter: blur(5px);
  opacity: 0;
}

.login-form button:hover::before {
  transition: all 1s;
  transform: translateX(320px);
  opacity: 0.7;
}

.login-form button:hover::after {
  transition: all 1s;
  transform: translateX(320px);
  opacity: 1;
}

/* 验证错误 */

.login-form .err {
  width: 482px;
  color: #e25c3d;
  font-size: 10px;
  text-align: left;
}
</style>
<script>
export default {
  data() {
    return {
      //用户名
      username: "",
      //密码
      userpwd: "",
      // 用户名的状态
      usernameState: "",
      // 密码的状态
      passwordState: "",
      err: "",
      checked: "",
    };
  },
  //页面加载调用获取cookie值
  mounted() {
    this.getCookie();
  },

  methods: {
    submitForm(formName) {
      const self = this;
      //判断复选框是否被勾选 勾选则调用配置cookie方法
      if (self.checked == true) {
        console.log("checked == true");
        //传入账号名，密码，和保存天数3个参数
        self.setCookie(self.username, self.password, 7);
      } else {
        console.log("清空Cookie");
        //清空Cookie
        self.clearCookie();
      }

      //与后端请求代码，本功能不需要与后台交互所以省略

      console.log("登陆成功");
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userpwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "username") {
            this.ruleForm.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userpwd") {
            this.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },

    //校验用户名
    regName() {
      let nameReg = /^[0-9a-zA-z_]{6,18}$/;
      if (nameReg.test(this.username)) {
        this.usernameState = "success";
        this.err = false;
        return true;
      } else {
        this.usernameState = "error";
        this.err = true;
        return false;
      }
    },
    //校验密码
    regPwd() {
      let upwdReg = /^[0-9a-zA-z]{6,18}$/;
      if (upwdReg.test(this.upwd)) {
        return true;
      } else {
        this.err = true;
      }
    },
    handle() {
      if (this.regName() && this.regPwd()) {
        //该将获取到的信息提交到WEB服务器
        // console.log("1")
        this.axios
          .post(
            "/login",
            "username=" + this.username + "&password=" + this.userpwd
          )
          .then((res) => {
            if (res.data.code == 4001) {
              this.$router.push("/");
              window.localStorage.setItem("islogin", true);
              window.localStorage.setItem("avatar", res.data.result);
            } else {
              window.alert("用户名或密码错误");
            }
          });
      }
    },
  },
};
</script>